<template>
	<div>
		<div class="loge">
			<div class="nav">
				<div class="nav_left">
					<div class="iconfont icon-fanhui" @click="gettply"></div>
					<span>返回</span>
				</div>
				<div class="nav_centen">
					<p class="centen">登录</p>
				</div>
				<div class="nav_rigth" @click="home">
					<div class="iconfont icon-home"></div>
				</div>
			</div>
			<!-- <div class="div">
				<div class="div_top">
					<p>第三方账号快捷登录</p>
				</div>
				<div class="div_botton">
					<div class="div_left">
						<div class="iconfont icon-QQ"></div>
						<p>QQ</p>
					</div>
					<div class="div_rigth">
						<div class="iconfont icon-weibo2"></div>
						<p>微博</p>
					</div>
				</div>
			</div> -->
			<div class="login">
				<div class="account">
					<input type="text" placeholder="账号" class="psd" />
					<div class="input">
						<input type="password" placeholder="密码" class="psd" v-model="psd" v-if="ifDisplay" />
						<input type="text" placeholder="密码" class="psd" v-model="psd" v-else />
						<!-- <i v-show="psd" @click="clearPassword()">×</i> -->
						<span
							v-show="ifDisplay"
							@click="ifDisplay = !ifDisplay"
							class="iconfont icon-mimayincang"
						></span>
						<span
							v-show="!ifDisplay"
							@click="ifDisplay = !ifDisplay"
							class="iconfont icon-yanjingmimaxianshi"
						></span>
					</div>
				</div>
				<div class="register" @click="personal">登录</div>
				<div class="acco" @click="account">注册</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			psd: '',
			ifDisplay: true,
			num: '',
		};
	},
	methods: {
		gettply() {
			this.$router.replace('/Male');
			this.$store.commit('showlists', (this.showlists = false));
		},
		home() {
			this.$store.commit('showlists', (this.showlists = false));
			this.$router.push({
				path: '/Male',
			});
		},
		personal() {
			this.$router.replace('/Male');
			this.$store.commit('showlists', (this.showlists = false));
		},
		account() {
			this.$router.replace('/loge/account');
			var r = parseInt(Math.random() * 16);
			var g = parseInt(Math.random() * 16);
			var b = parseInt(Math.random() * 16);
			var a = parseInt(Math.random() * 16);
			r = r.toString(16);
			g = g.toString(16);
			b = b.toString(16);
			a = a.toString(16);
			//拼接成颜色的RGB值
			this.num = r + g + b + a;
			this.$store.commit('num', this.num);
		},
	},
	created() {
		this.$store.commit('showlists', (this.showlists = true));
	},
};
</script>

<style lang="less" scoped>
.loge {
	width: 640px;
	position: relative;
	.nav {
		width: 640px;
		background-color: #b83320;
		display: flex;
		justify-content: space-between;
		.nav_left {
			flex: 0 0 100px;
			display: flex;
			.iconfont {
				font-size: 30px;
				line-height: 70px;
				color: #fff;
				margin-left: 10px;
			}
			span {
				line-height: 70px;
				color: #fff;
				font-size: 16px;
			}
		}
		.nav_centen {
			flex: 1;
			margin: 15px 0;
			// background: #999;
			display: flex;
			.centen {
				margin: 0 auto;
				color: #fff;
				margin-top: 8px;
				font-size: 18px;
			}
		}
		.nav_rigth {
			flex: 0 0 100px;
			display: flex;
			// background-color: #e9e9e9;
			.iconfont {
				font-size: 40px;
				line-height: 70px;
				margin: 0 auto;
				color: #fff;
			}
			div:nth-child(2) {
				font-size: 35px;
			}
		}
	}
	.login {
		width: 100%;
		position: fixed;
		top: 50%;
		left: 0;
		transform: translate(0%,-70%);
		.account {
			width: 80%;
			margin: 0 auto;
			border-bottom: 1px solid #dfdfdf;
			padding-top: 28px;
			// color: #bfbfbf;
			input {
				width: 100%;
				height: 80px;
				border: 2px solid transparent;
				border-bottom-color: #ccc;
				font-size: 26px;
				text-indent: 10px;
			}
			.input {
				position: relative;
				i {
					width: 14px;
					height: 14px;
					line-height: 14px;
					position: absolute;
					top: 35px;
					right: 50px;
					font-size: 18px;
					display: inline-block;
					color: white;
					background: #cdcdcd;
					border-radius: 50%;
					text-align: center;
					font-style: normal;
				}

				.account .psd {
					width: 81.6%;
				}
				span {
					color: #b83320;
					position: absolute;
					top: 0;
					right: 10px;
					float: right;
					line-height: 90px;
					font-size: 40px;
				}
			}
		}
		.register {
			width: 80%;
			// margin: 40px 50px 0;
			margin: 40px auto 0;
			text-align: center;
			background-color: #b83320;
			border-radius: 50px;
			padding: 10px 0;
			font-size: 32px;
			color: #fff;
		}
		.acco {
			color: #b83320;
			margin: 10px 40px;
		}
	}
}
</style>
